// @ts-nocheck
import styles from './index.module.less';
import { IconAddBorder } from '@codexteam/icons';
import { make } from '../../utils/dom';

class Board {
    static get toolbox() {
        return {
            title: 'Board',
            icon: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        viewBox="0 0 512 512" xml:space="preserve">
     <path style="fill:#DBE9FD;" d="M461.911,367.3H50.089c-9.217,0-16.695-7.473-16.695-16.695V16.695C33.394,7.473,40.872,0,50.089,0
       h411.822c9.217,0,16.695,7.473,16.695,16.695v333.909C478.606,359.827,471.129,367.3,461.911,367.3z"/>
     <path style="fill:#C5DCFD;" d="M461.911,0H256v367.3h205.911c9.217,0,16.695-7.473,16.695-16.695V16.695
       C478.606,7.473,471.129,0,461.911,0z"/>
     <path style="fill:#C5DCFD;" d="M256,478.603c-9.217,0-16.695-7.473-16.695-16.695V350.605c0-9.223,7.478-16.695,16.695-16.695
       c9.217,0,16.695,7.473,16.695,16.695v111.303C272.695,471.131,265.218,478.603,256,478.603z"/>
     <path style="fill:#9DB0CA;" d="M272.695,461.908V350.605c0-9.223-7.478-16.695-16.695-16.695v144.694
       C265.218,478.603,272.695,471.131,272.695,461.908z"/>
     <path style="fill:#899199;" d="M495.302,367.3H16.698c-9.217,0-16.695-7.473-16.695-16.695s7.478-16.695,16.695-16.695h478.604
       c9.217,0,16.695,7.473,16.695,16.695S504.52,367.3,495.302,367.3z"/>
     <path style="fill:#737980;" d="M495.302,333.909H256V367.3h239.302c9.217,0,16.695-7.473,16.695-16.695
       S504.52,333.909,495.302,333.909z"/>
     <path style="fill:#6E6057;" d="M361.457,479.462l-100.173-33.391c-1.755-0.592-3.532-0.796-5.285-0.799v0.008
       c-1.753,0.001-3.528,0.203-5.28,0.79l-100.173,33.391c-8.75,2.913-13.468,12.369-10.554,21.114c2.326,7,8.847,11.424,15.837,11.424
       c1.75,0,3.533-0.277,5.282-0.864l94.888-31.629v-0.001l94.893,31.631c1.75,0.587,3.533,0.864,5.282,0.864
       c6.989,0,13.511-4.424,15.837-11.424C374.925,491.832,370.208,482.376,361.457,479.462z"/>
     <path style="fill:#615349;" d="M361.457,479.462l-100.173-33.391c-1.755-0.592-3.532-0.796-5.285-0.799v34.232l94.893,31.631
       c1.75,0.587,3.533,0.864,5.282,0.864c6.989,0,13.511-4.424,15.837-11.424C374.925,491.832,370.208,482.376,361.457,479.462z"/>
     <path style="fill:#899199;" d="M495.302,33.391H16.698c-9.217,0-16.695-7.473-16.695-16.695S7.481,0,16.698,0h478.604
       c9.217,0,16.695,7.473,16.695,16.695S504.52,33.391,495.302,33.391z"/>
     <path style="fill:#737980;" d="M495.302,0H256v33.391h239.302c9.217,0,16.695-7.473,16.695-16.695S504.52,0,495.302,0z"/>
     <path style="fill:#6BBAE2;" d="M395.129,300.518H116.871c-9.217,0-16.695-7.473-16.695-16.695V83.477
       c0-9.223,7.478-16.695,16.695-16.695h278.258c9.217,0,16.695,7.473,16.695,16.695v200.346
       C411.824,293.046,404.347,300.518,395.129,300.518z"/>
     <path style="fill:#60AED5;" d="M395.129,66.782H256v233.737h139.129c9.217,0,16.695-7.473,16.695-16.695V83.477
       C411.824,74.255,404.347,66.782,395.129,66.782z"/>
     <rect x="133.564" y="100.173" style="fill:#ECEFF0;" width="244.867" height="166.955"/>
     <rect x="255.998" y="100.173" style="fill:#DADFE4;" width="122.433" height="166.955"/>
     <rect x="205.911" y="166.955" style="fill:#6BBAE2;" width="205.911" height="33.391"/>
     <rect x="255.998" y="166.955" style="fill:#60AED5;" width="155.824" height="33.391"/>
     <rect x="205.911" y="66.782" style="fill:#6BBAE2;" width="33.391" height="233.737"/>
     </svg>`
        };
    }

    static get isReadOnlySupported() {
        return true;
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            id: data.id || '',
        };

        this.api = api;

        this.readOnly = readOnly;

        this.config = config || {};

        this.wrapper = undefined;
    }

    render() {
        this.wrapper = make('div', styles['cx-custom-board-iframe']);

        const iframe = make('iframe', styles.iframe, { src: `/docx-vue/design/board?id=${this.data.id}&i=1` });
        const fullBtn = make('div', styles.fullBtn, { innerHTML: IconAddBorder, title: "全屏" })
        this.wrapper.append(iframe, fullBtn);
        window.handleSaveBoard = (id) => {
            if (!this.data.id) {
                this.data.id = id;
            }
        }
        fullBtn.addEventListener('click', () => {
            iframe.requestFullscreen();
        }, false)

        return this.wrapper;
    }

    save(blockContent) {
        return this.data
    }
}

export default Board